<%--
  Created by IntelliJ IDEA.
  User: hezhangwen
  Date: 2018/11/13
  Time: 10:18 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <%@include file="/WEB-INF/common/hplus-css.jsp"%>
    <link href="${path}/assets/hplus/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body>

    <%--accept="image/x-png,image/gif,image/jpeg,image/bmp"--%>
    <div>
        <input type="file" id="attaches" name="attaches" style="display: none"  multiple="multiple" />
        <button type="button" class="btn btn-info" id="btn-upload"><i class="fa fa-cloud-upload">&nbsp;上传</i></button>
        <span id="afterUpload"></span>

        <input type="text" id="filePath" style="display: none"/>
        <input type="text" id="fileOrignName" style="display: none"/>
        <button type="button" class="btn btn-info" id="btn-down" onclick="downloadFileByForm()"><i class="fa fa-cloud-download">&nbsp;下载</i></button>
    </div>

    <%@include file="/WEB-INF/common/hplus-js.jsp"%>
    <!-- 自定义js -->
    <script src="${path}/assets/hplus/js/content.js?v=1.0.0"></script>
    <script src="${path}/assets/js/plugins/AjaxFileUpload/ajaxfileupload.js" type="text/javascript"></script>
    <script type="application/javascript">

        $("#btn-upload").click(function () {
            $("#attaches").click();

        })
        $("#attaches").change(function () {
            if ($("#attaches").val().length > 0) {
                ajaxUpload();
            }
            else {
                swal({ title: '请选择上传文件！', text: '', type: 'info' });
            }
        });

        /**
         * 下载
         */
        function downloadFileByForm() {
            var path = $("#filePath").val()
            if (path == null || path == "undefined" || path == ""){
                alert("请先上传文件再执行下载测试")
                return;
            }
            var fileName = $("#fileOrignName").val();
            var url =  "${path}/download";
            var form = $("<form></form>").attr("action", url).attr("method", "post");
            form.append($("<input></input>").attr("type", "hidden").attr("name", "filePath").attr("value", path));
            form.append($("<input></input>").attr("type", "hidden").attr("name","fileName").attr("value",fileName));
            form.appendTo('body').submit().remove();
        }

        /**
         * 上传
         */
        function ajaxUpload(){
            $.ajaxFileUpload({
                url: '${path}/upload', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'attaches', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status){
                    var attaches = data.files.attaches;
                    if(typeof(attaches) != "undefined"){
                        $("#attaches").unbind('change',ajaxUpload);
                        $("#attaches").bind('change',ajaxUpload);
                        var html = "";
                        var hidden = $(".hidden");
                        for(var i = 0; i < attaches.length; i++){
                            // console.log(attaches[i].original_filename)
                            // console.log(attaches[i].length)
                            // console.log(attaches[i].path)
                            $("#filePath").val(attaches[i].path)
                            $("#fileOrignName").val(attaches[i].original_filename)
                            html += "<tr class='data'>";
                            html += " <td>"+attaches[i].original_filename+"</td>";
                            // html += " <td>"+attaches[i].length+"kb</td>";
                            html += " <td><a class='linkbtn' href=' ' onclick=\"deleteFile(this,'"+attaches[i].path+"')\">删除</a ></td>";
                            html += "</tr>";
                            hidden.append("<input type='hidden' name='attach_length' value='"+attaches[i].length+"'/>");
                            hidden.append("<input type='hidden' name='attach_path'  value='"+attaches[i].path+"'/>");
                            hidden.append("<input type='hidden' name='attach_original_filename' value='"+attaches[i].original_filename+"'/>");
                        }
                        console.log(html)
                        $(html).insertAfter("#afterUpload");
                    }
                },
                error: function (data, status, e){
                    alert(e);
                }
            });
        }

    </script>


</body>

</html>
